<template>
  <div class="home">
    <div class="hero">
      <h1 class="title">欢迎来到我们的系统</h1>
      <p class="subtitle">请选择以下功能入口</p>
    </div>
    <div class="features">
      <div class="feature">
        <router-link to="/device" class="card">
          <h2>物联网设备管理模块</h2>
          <p>根据商户号和设备序列号，完成设备的增删改查，查看设备在线状态和当前/历史数据</p>
        </router-link>
      </div>
      <div class="feature">
        <router-link to="/model" class="card">
          <h2>模型应用模块</h2>
          <p>将模型搭载在服务器上，实现前后端数据交互和模型返回结果，应用于数据分析和预测</p>
        </router-link>
      </div>
      <div class="feature">
        <router-link to="/warning" class="card">
          <h2>病害预警模块</h2>
          <p>读取历史和实时数据，实现可视化展示和病虫害预警，提供防治信息和建议</p>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Home',
}
</script>

<style scoped>
.home {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.hero {
  text-align: center;
  margin-bottom: 2rem;
}

.title {
  font-size: 3rem;
  margin-bottom: 0.5rem;
}

.subtitle {
  font-size: 1.5rem;
  color: #888;
}

.features {
  display: flex;
  flex-wrap: wrap;
}

.feature {
  margin: 1rem;
  flex: 1 1 30rem;
}

.card {
  display: block;
  padding: 1rem;
  border-radius: 0.5rem;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
}

.card:hover {
  transform: translateY(-0.5rem);
}

h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

p {
  font-size: 1.25rem;
  color: #555;
}
</style>
